<template>
  <div class="content" id="content" ref="contentRef"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, reactive, unref, watch, onMounted } from 'vue';


let echartsInstance = null;
const contentRef = ref(null);

const initEcharts = (dom = null) => {
  const d = contentRef.value;
  dom === null ? dom = d : dom = dom;
  dom.removeAttribute('_echarts_instance_');
  echartsInstance = echarts.init(dom);
  const option = {
    grid: {
      show: true,
      left: '5%',
      right: '3%',
      top: '15%',
      bottom: '10%',
    },
    xAxis: {
      type: 'category',
      data: ['工序1', '工序2', '工序3', '工序4','工序5','工序6'],
      axisLine: {
        show: true,
        lineStyle: {
          color: '#fff'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: [
      {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          color: '#fff'
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      {
        show: false
      }
    ],
    legend: {
      orient: 'horizontal',
      top: 'top',
      right:'right',
      data: ['完成数', '未完成数'],
      textStyle: {
        color: '#fff'
      },
      itemGap: 5,
      itemWidth: 25,
      itemHeight: 14 
    },
    series: [
      {
        name: '完成数',
        data: [1, 4, 9, 4,5,3],
        type: 'bar',
        color: '#008c00',
        stack:'total',
        barWidth: 50,
        label: { 
          show: true, 
          position: 'inside',
          color: '#ffffff',
          fontSize: 14,
          fontWeight: 'normal',
          textShadowColor: 'transparent',
          formatter: '{c}'
        },
      },
      {
        name: '未完成数',
        data: [0, 1, 2, 3,10,9],
        type: 'bar',
        color: '#ff0000',
        stack:'total',
        barWidth: 50,
        label: { 
          show: true, 
          position: 'inside',
          color: '#ffffff',
          fontSize: 14,
          fontWeight: 'normal',
          textShadowColor: 'transparent',
          formatter: '{c}'
        },
      }
    ],
    graphic: [
      {
        type: 'group',
        key: 'process-labels',
        children: [
          {
            type: 'text',
            key: 'process1-label',
            position: [0, 0],
            style: {
              text: '不良数量:10\n不良率:90%\n计划数量:100',
              fill: '#fff',
              fontSize: 14,
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            key: 'process1-label',
            position: [0, 0],
            style: {
              text: '不良数量:10\n不良率:90%\n计划数量:100',
              fill: '#fff',
              fontSize: 14,
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            key: 'process1-label',
            position: [0, 0],
            style: {
              text: '不良数量:10\n不良率:90%\n计划数量:100',
              fill: '#fff',
              fontSize: 14,
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            key: 'process1-label',
            position: [0, 0],
            style: {
              text: '不良数量:10\n不良率:90%\n计划数量:100',
              fill: '#fff',
              fontSize: 14,
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            key: 'process1-label',
            position: [0, 0],
            style: {
              text: '不良数量:10\n不良率:90%\n计划数量:100',
              fill: '#fff',
              fontSize: 14,
              textAlign: 'center'
            }
          },
          {
            type: 'text',
            key: 'process1-label',
            position: [0, 0],
            style: {
              text: '不良数量:10\n不良率:90%\n计划数量:100',
              fill: '#fff',
              fontSize: 14,
              textAlign: 'center'
            }
          }
        ]
      }
    ]
  }
  option && echartsInstance.setOption(option);
  setTimeout(() => {
    const option = echartsInstance.getOption();
    const seriesData = option.series;
    const xAxisData = option.xAxis[0].data;
    const graphicChildren = [];
    xAxisData.forEach((processName, index) => {
      let totalValue = 0;
      seriesData.forEach(series => { totalValue += series.data[index] || 0});
      const point = echartsInstance.convertToPixel({ xAxisIndex: 0, yAxisIndex: 0 }, [index, totalValue]);
      graphicChildren.push({
        type: 'text',
        key: `process${index + 1}-label`,
        position: [point[0], point[1] - 50]
      });
    });
    echartsInstance.setOption({graphic: [{ key: 'process-labels',children: graphicChildren }]});
  }, 500);
}
const resizeEcharts = () => {
  echartsInstance.resize();
  setTimeout(() => {
    const option = echartsInstance.getOption();
    const seriesData = option.series;
    const xAxisData = option.xAxis[0].data;
    const graphicChildren = [];
    xAxisData.forEach((processName, index) => {
      let totalValue = 0;
      seriesData.forEach(series => {totalValue += series.data[index] || 0});
      const point = echartsInstance.convertToPixel({ xAxisIndex: 0, yAxisIndex: 0 }, [index, totalValue]);
      graphicChildren.push({
        type: 'text',
        key: `process${index + 1}-label`,
        position: [point[0], point[1] - 50]
      });
    });
    echartsInstance.setOption({graphic: [{ key: 'process-labels',children: graphicChildren }]});
  }, 500);
}


onMounted(() => {
  initEcharts();
  window.addEventListener('resize', resizeEcharts);
  console.log('init');
})

defineExpose({
  initEcharts,
  resizeEcharts
})
</script>

<style lang="css">
.content {
  width: 100%;
  height: 100%;
}
</style>
